<!DOCTYPE html>
<html lang="en-US"
	  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>Signin Template for Bootstrap</title>
		<!-- Bootstrap core CSS -->
		<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
		<!-- Custom styles for this template -->
		<link th:href="@{/css/signin.css}" rel="stylesheet">
	</head>

	<body class="text-center">
		<div class="form-signin">
			<form id="fr" th:action="@{/doLogin}" method="post">
				<img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="图片不存在" width="72" height="72">
				<h1 class="h3 mb-3 font-weight-normal" th:text="#{index.tips}">Please sign in</h1>
				<p class="font-italic color-rect" style="color: #008c8c">
					[[${error}]]
				</p>
				<label class="sr-only" th:text="#{index.username}">Username</label>
				<input type="text" name="username" class="form-control"
					   th:placeholder="#{index.username}" required="" autofocus="">

				<label class="sr-only" th:text="#{index.password}">Password</label>
				<input type="password" name="password" class="form-control"
					   th:placeholder="#{index.password}" required="" autofocus="">
				<div class="verify">
					<img class="img-thumbnail" th:src="@{/verify.jpeg}">
					<label class="sr-only" th:text="#{index.verify}">VerifyCode</label>
					<input type="text" name="userVerifyCode" class="form-control"
						   th:placeholder="#{index.verify}" required="" autofocus="">
				</div>
				<div class="checkbox mb-3">
					<input type="checkbox" name="remember-me" value="true" th:text="#{index.remember}">
				</div>
				<button class="btn btn-lg btn-primary btn-block" type="submit" >[[#{index.loginBtn}]]</button>
				<button class="btn btn-lg btn-primary btn-block" type="submit" id="regBtn">[[#{index.regBtn}]]</button>
				<script>
					document.getElementById('regBtn').onclick = function (){
						document.getElementById('fr').action = '/reg'
					}
				</script>
			</form>
			<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
			<a class="btn btn-sm" th:href="@{/index(lang='zh_CN')}">中文</a>
			<a class="btn btn-sm" th:href="@{/index(lang='en_US')}">English</a>
			<a class="btn btn-sm" th:href="@{/index(lang='ja_JP')}">日本語</a>
		</div>
	</body>

</html>